<!--
 * @Author: zhang ke
 * @Date: 2025-07-04 10:50:52
 * @LastEditors: your name
 * @LastEditTime: 2025-07-05 16:59:31
 * @Description: 实时游客统计
 * @FilePath: \vue3-admin\src\views\screen\components\Tourist.vue
-->
<template>
  <div class="tourist-wrapper">
    <div class="box">
      <!-- 头部区域 -->
      <div class="title-wrapper">
        <div class="left">
          <div class="title">实时游客统计</div>
          <img class="title-icon" src="../images/dataScreen-title.png" />
        </div>
        <div class="right">
          可预约的总量<span>9999999</span>人
        </div>
      </div>
      <!-- 人数区域 -->
      <div class="number-wrapper">
        <div class="num-icon" v-for="(item, index) in num">{{ item }}</div>
      </div>
      <!-- 水球图 -->
      <div class="echarts-wrapper">
        <!-- 边框样式 -->
        <div class="line"></div>
        <div class="progress-wrapper">
          <el-progress type="circle" color="#53c6d9" :percentage="50" width="216" />
        </div>
        <!-- echarts -->
        <div class="liquidfill" ref="touristRef"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-liquidfill'
let num = ref('216908人')
let touristRef = ref()

onMounted(() => {
  touristEcharts()
})

const touristEcharts = () => {
  const chart = echarts.init(touristRef.value)
  const option = {
    series: [
      {
        // 修改波浪颜色
        // color:['yellow'],// 所有波浪一个颜色
        // color:['#54c3d7','#56cab4','#40a5ba'], //每个波浪不同颜色，颜色数组长度为对应的波浪个数
        // 自定义渲染器
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1, // 从上到下
            colorStops: [
              {
                offset: 0, color: '#53c7b0' // 顶部颜色
              },
              {
                offset: 1, color: '#409dbc' // 底部颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        type: 'liquidFill',
        data: [0.6, 0.4, 0.3],
        radius: '84%',//控制水球大小
        // waveAnimation: true,
        direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
        outline: {
          show: false,//设置是否显示边框
          // itemStyle: {
          //   borderColor: 'red', // 外边框颜色
          //   borderWidth: 2,          // 外边框大小
            
          // },
        },
        //背景颜色
        backgroundStyle: {
          borderColor: '#53c5d8',      // 内边框颜色
          borderWidth: 1,             // 内边框大小
          //背景颜色渐变
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [{
              offset: 0.8,
              color: '#11144e' // 中心颜色
            }, {
              offset: 1,
              color: '#2b6e7d'   // 边缘颜色
            }],
            global: false
          }
        },
        // 图形上的文本标签
        label: {
          normal: {
            formatter: '预销量60%',
            textStyle: {
              fontSize: 16,
              color: '#ffffff'
            },
            position: 'inside',
            top: '10%',

          }
        },
      }
    ]
  }
  chart.setOption(option)
}
</script>

<style scoped lang="scss">
.tourist-wrapper {
  margin-top: 10px;
  width: 100%;
  height: 340px;

  // background: #bfc;
  .box {
    width: 100%;
    height: 100%;
    background: url('../images/dataScreen-main-lb.png') no-repeat;
    background-size: cover;

    .title-wrapper {
      display: flex;
      justify-content: space-between;

      .left {
        padding: 0 10px;

        .title {
          color: white;
          font-size: 20px;
          margin-bottom: 2px;

        }

        .title-icon {
          width: 50px;
        }
      }

      .right {
        color: white;
        padding-top: 30px;
        margin-right: 10px;

        span {
          color: #ff9400;
        }
      }
    }

    .number-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .num-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 40px;
        background: url('../images/total.png') no-repeat;
        background-size: cover;
        color: #7cc2e9;
        font-size: 20px;
        font-weight: bold;


      }
    }

    .echarts-wrapper {
      width: 100%;
      height: 220px;
      position: relative;
      .line{
        position: absolute;
        width: 210px;
        height: 210px;
        z-index: 999;
        left: 50%;
        top: 2.6%;
        border-radius: 50%;
        transform: translate(-50%,0);
        border: 1px dashed  #55c6d9;
      }
      .progress-wrapper{
        position: absolute;
        top: 2.6px;
        left: 49.9%;
        transform: translate(-50%,0) rotate(90deg);
        
      }
      .liquidfill {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style>
.el-progress-circle__track {
   stroke: none !important;
}
</style>
